<template>
  <div class="maincontain">
    <div class="createuser">
      <a-button @click="goLabTypeEditor(FormType.Create)" type="primary"
        >新增实验室类型</a-button
      >
      <div class="filterbar">
        <a-col :span="50">
          <a-input
            :maxlength="150"
            class="searchinput"
            addon-before="实验室类型名"
            v-model:value="searchInfo.name"
            placeholder="输入实验室类型名查询"
            @change="onSearch"
          />
        </a-col>
      </div>
    </div>

    <div class="lablist">
      <a-table
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :dataSource="dataSource"
        :columns="columsConfig"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operator'">
            <a-space wrap>
              <a-button
                size="small"
                type="primary"
                @click="
                  () => {
                    goLabTypeEditor(FormType.Update, record);
                  }
                "
                >编辑</a-button
              >
              <a-button
                danger
                size="small"
                @click="
                  () => {
                    deleteLabModal(record);
                  }
                "
                >删除</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <a-modal v-model:open="modalOpen" title="报修信息" :keyboard="true">
    <a-form-item label="实验室类型" name="typeName">
      <a-input v-model:value="formStateLabTypeInfo!.labTypeName"></a-input>
    </a-form-item>
    <a-form-item
      v-if="curformType === FormType.Update"
      label="capacity"
      name="capacity"
    >
      <a-input-number
        v-model:value="formStateLabTypeInfo!.capacity"
      ></a-input-number>
    </a-form-item>

    <template #footer>
      <a-button key="back" @click="modalState(false, FormType.Create)"
        >取消</a-button
      >
      <a-button key="submit" type="primary" @click="handleTypeSub"
        >提交</a-button
      >
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { FormType } from "@/EnvEnum/form";
import { columsConfig } from "./config";
import { computed, createVNode, onMounted, ref } from "vue";
import { debounce, omit } from "lodash";
import { IPagenation } from "@/views/userList/list/index.vue";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Message } from "@/utils/message";
import {
  createLabeType,
  deleteLabeType,
  getLabeTypeList,
} from "@/api/methods/labTypeReq";
import {
  ILabTypeInfo,
  ILabTypeQuery,
  ILabTypeUpdate,
} from "@/api/RequestIDL/labType";
import { updateLabeType } from "@/api/methods/labTypeReq";
import dayjs from "dayjs";
import { userInfo } from "@/utils/userInfo";

const pageConfig = ref({
  pageSize: 10,
  page: 1,
  total: 0,
});
const pagination = computed(() => ({
  total: pageConfig.value.total,
  current: pageConfig.value.page,
  pageSize: pageConfig.value.pageSize,
}));
const searchInfo = ref<ILabTypeQuery>({
  name: "",
});
const searchConfig = computed((): ILabTypeQuery => {
  return {
    ...searchInfo.value,
    ...omit(pageConfig.value, "total"),
  };
});
const loading = ref(false);
const dataSource = ref<ILabTypeInfo[]>([]);
const handleTableChange = async (pagination: IPagenation) => {
  pageConfig.value.page = pagination.current;
  pageConfig.value.pageSize = pagination.pageSize;
  getLabTypeInfoList();
};
const onSearch = debounce(
  async () => {
    await getLabTypeInfoList();
  },
  500,
  { maxWait: 1000 }
);
const getLabTypeInfoList = async () => {
  const res = await getLabeTypeList(searchConfig.value);
  if (res.code === 20000) {
    dataSource.value = res.data.records;
    for (const item of dataSource.value) {
      item.createTime = dayjs(item.createTime).format(
        import.meta.env.APP_FORMAT_TIME
      );
      item.updateTime = dayjs(item.updateTime).format(
        import.meta.env.APP_FORMAT_TIME
      );
    }
    pageConfig.value.total = res.data.total;
  }
};
onMounted(async () => {
  await getLabTypeInfoList();
});
const deleteLabModal = (record: ILabTypeInfo) => {
  Modal.confirm({
    title: "删除提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode(
      "div",
      { style: "color:red;" },
      `确定要删除【${record.typeName}】实验室类型吗？`
    ),
    onOk() {
      deleteLabeType({ id: record.id }).then((res) => {
        if (res.code == 20000) {
          Message("success", "删除成功");
          // 重新拉取列表
          getLabTypeInfoList();
        }
      });
    },
    onCancel() {},
  });
};
const goLabTypeEditor = (formType: FormType, record?: ILabTypeInfo) => {
  if (formType === FormType.Update) {
    formStateLabTypeInfo.value!.labTypeId = record?.id!;
    formStateLabTypeInfo.value!.labTypeName = record?.typeName!;
    formStateLabTypeInfo.value!.capacity = record?.capacity!;
  } else {
    formStateLabTypeInfo.value = {} as any;
  }
  modalState(true, formType, record);
};
// 报修
const modalOpen = ref(false);
const formStateLabTypeInfo = ref<ILabTypeUpdate>({});
const recordCache = ref<ILabTypeInfo>();
const curformType = ref<FormType>(FormType.Create);
const modalState = async (
  isShow: boolean,
  formType: FormType,
  record?: ILabTypeInfo
) => {
  curformType.value = formType;
  modalOpen.value = isShow;
  recordCache.value = record;
};
const handleTypeSub = async () => {
  if (curformType.value === FormType.Create) {
    const res = await createLabeType(
      omit(formStateLabTypeInfo.value, "id", "capacity")
    );
    if (res.code === 20000) {
      Message("success", "新增实验室类型成功");
    }
  } else {
    const res = await updateLabeType(
      omit(formStateLabTypeInfo.value!, "capacity")
    );
    if (res.code === 20000) {
      Message("success", "修改实验室类型成功");
    }
  }
  await getLabTypeInfoList();
  modalOpen.value = false;
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.maincontain {
  .createuser {
    display: flex;
    padding: 10px;
    width: 500px;
    .filterbar {
      margin-left: 10px;
    }
  }
}
</style>
